<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>植百汇采购单</title>
    <script type="text/javascript" src="${ctxStatic}/plugin/layui2.0/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="${ctxStatic}/plugin/layui2.0/layui.js"></script>
    <link rel="stylesheet" href="${ctxStatic}/plugin/layui2.0/css/layui.css" media="all">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>采购单readOnly</legend>
</fieldset>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">供应商</label>
            <div class="layui-input-inline">
                <input type="text" readonly value="${purchaseOrder.supplierName}" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">供应商合同</label>
            <div class="layui-input-inline">
                <input type="text" readonly value="${purchaseOrder.contractName}" class="layui-input">
            </div>
        </div>


    </div>

    <div class="layui-form-item">

        <div class="layui-inline">
            <label class="layui-form-label">交货日期</label>
            <div class="layui-input-inline">
                <input type="text" readonly value=" ${purchaseOrder.deliveryDate}" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">合同编号</label>
            <div class="layui-input-inline">
                <input type="text" readonly value="${purchaseOrder.contractNo}" class="layui-input">
            </div>
        </div>

    </div>


    <div class="layui-form-item">

        <label class="layui-form-label">仓库</label>
        <div class="layui-input-inline">
            <select name="warehouseId" id="warehouseId" lay-verify="required" lay-search="">
                <option value="">直接选择或搜索选择</option>
                <c:forEach items="${warehouseList}" var="i">
                <option value="${i.id}">${i.warehouseName}</option>
                </c:forEach>
            </select>
        </div>

    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea id="remarks" name="remarks" placeholder="请输入内容"
                      class="layui-textarea">${purchaseOrder.remarks}</textarea>
        </div>
    </div>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>填写入库明细单</legend>
    </fieldset>

    <div class="layui-form-item">

        <div class="layui-inline">
            <div class="layui-input-block">
                <div onclick="addItemX()" class="layui-btn layui-btn-normal">添加</div>
            </div>
        </div>
    </div>

    <div id="purchaseOrder">


        <c:forEach items="${itemList}" var="i">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">SKU</label>
                    <div class="layui-input-inline">
                        <select readonly="" name="sku" id="sku" lay-verify="required" lay-search="">
                            <option value="">直接选择或搜索选择</option>
                            <option
                                    <c:if test="${i.skuId=='2'}">selected</c:if> value="2">产品A
                            </option>
                            <option
                                    <c:if test="${i.skuId=='3'}">selected</c:if> value="3">产品B
                            </option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">采购单价</label>
                    <div class="layui-input-block">
                        <input readonly type="text" value="${i.price}" id="price" name="price" autocomplete="off"
                               placeholder="请输入采购单价" class="layui-input">
                        <input type="hidden" name="reType" id="reType" value="0"/><!--采购单类型-->
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">采购数量</label>
                    <div class="layui-input-block">
                        <input type="text" readonly value="${i.num}" name="num" id="num" autocomplete="off"
                               placeholder="请输入采购数量" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">入库数量</label>
                    <div class="layui-input-block">
                        <input type="text" name="reNum" id="reNum" autocomplete="off" placeholder="请输入实际入库数量"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <div class="layui-input-block">

                    </div>
                </div>
            </div>
        </c:forEach>


    </div>


    <hr/>
    <div class="layui-form-item">
        <div class="layui-inline">
            <div class="layui-input-block">
                <div onclick="subForm()" class="layui-btn">保存</div>
                <div onclick="reBack()" class="layui-btn layui-btn-primary">返回</div>
            </div>
        </div>
    </div>
</form>

</body>


<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        //交货日期
        laydate.render({
            elem: '#deliveryDate'
        });

    });
</script>
<script>

    function addItemX() {
        var html="<div class=\"layui-form-item\">\n" +
            "            <div class=\"layui-inline\">\n" +
            "                <label class=\"layui-form-label\">SKU</label>\n" +
            "                <div class=\"layui-input-inline\">\n" +
            "                    <select name=\"sku\" id=\"sku\" lay-verify=\"required\" lay-search=\"\">\n" +
            "                        <option value=\"\">直接选择或搜索选择</option>\n" +
            "                        <option value=\"2\">产品A\n" +
            "                        </option>\n" +
            "                        <option value=\"3\">产品B\n" +
            "                        </option>\n" +
            "                    </select>\n" +
            "                </div>\n" +
            "            </div>\n" +
            "\n" +
            "            <div class=\"layui-inline\">\n" +
            "                <label class=\"layui-form-label\">入库数量</label>\n" +
            "                <div class=\"layui-input-block\">\n" +
            "                    <input type=\"text\" name=\"reNum\" id=\"reNum\" autocomplete=\"off\" value=\"\"\n" +
            "                           class=\"layui-input\">\n" +
            "                    <input readonly type=\"hidden\" value=\"\" id=\"price\" name=\"price\" autocomplete=\"off\"\n" +
            "                            class=\"layui-input\">\n" +
            "                    <input type=\"hidden\" name=\"reType\" id=\"reType\" value=\"1\"/>\n" +
            "                    <input type=\"hidden\" readonly value=\"\" name=\"num\" id=\"num\"  class=\"layui-input\">\n" +
            "                </div>\n" +
            "            </div>\n" +
            "\n" +
            "            <div class=\"layui-inline\">\n" +
            "                <div class=\"layui-input-block\">\n" +
            "                    <div onclick=\"removeItem(this)\" class=\"layui-btn  layui-btn-danger \">删除</div>\n" +
            "                </div>\n" +
            "            </div>\n" +
            "        </div>"

        $("#purchaseOrder").append(html);

        layui.use('form', function () {

            var form = layui.form;
            form.render();

        });
    }

    function removeItem(obj) {
        var len = $("#purchaseOrder").find(".layui-form-item");

        alert(len.length);
        if (len.length > 1) {
            $(obj).parent().parent().parent().remove();
        }
    }

    function subForm() {
        var purchaseOrder = new Object();
        purchaseOrder.warehouseId=$("#warehouseId").val();
        purchaseOrder.purchaseOrderId='${purchaseOrder.id}';
        //采购明细单
        var purchaseOrderItems = $("#purchaseOrder").find(".layui-form-item");
        var orderItems = new Array();
        var orderItem;
        for (var i = 0; i < purchaseOrderItems.length; i++) {
            orderItem = new Object();
            orderItem.skuId = $(purchaseOrderItems[i]).find("select option:selected").val();
            orderItem.price = $(purchaseOrderItems[i]).find("#price").val();
            orderItem.num = $(purchaseOrderItems[i]).find("#num").val();
            orderItem.reType = $(purchaseOrderItems[i]).find("#reType").val();
            orderItem.reNum = $(purchaseOrderItems[i]).find("#reNum").val();

            orderItems.push(orderItem);
        }
        purchaseOrder.items = orderItems;
        var fromData = new FormData();

        fromData.append("jsons", JSON.stringify(purchaseOrder));
        //提交数据
        $.ajax({
            url: "${ctx}/warehouse/warehouseReceipt/saveWarehouseReceipt",
            type: "post",
            data: fromData,
            contentType: false, // 注意这里应设为false
            processData: false,
            beforeSend: function () {
                index = layer.load(1, {
                    shade: [0.5, '#fff'] //0.1透明度的白色背景
                });
            },
            complete: function () {
                layer.close(index);
            },
            success: function (data) {
                if (data.message == "1") {
                    layer.alert('保存成功!', {
                        icon: 1,
                        title: "提示"
                    });
                    layer.close(index);
                    reBack();
                }
            },
            error: function (e) {
                layer.alert('保存失败!', {
                    icon: 2,
                    title: "提示"
                });

            }
        });


    }

    function reBack() {
        window.location.href = "${ctx}/purchase/purchaseOrder/list";
    }
</script>


</html>
